<template>
	<view>
		<u-navbar back-text="结存" :backTextStyle="backTextColor" backIconColor="#fff" :background="background">
			<view style="text-align: center; width: 100%;">
				<text class="nav-title">{{itemTitle}}</text>
			</view>
		</u-navbar>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item  :title="item.customerName " :arrow="false" :key="item.id" v-for="(item,index) in myCustomerList" @click="toggleActive" :bg-color="item.bgColor" >
					<u-tag :text="item.goldBalance" type="success" />
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			myCustomerList: {
				type: Array,
				default: function() {
					return [];
				}
			},
		},
		
		data() {
			return {
				background: this.TopColor,
				keyword:'',
				backTextColor: {
					'color': '#ffffff'
				},
				actionStyle:{
					'color':'#FC0099',
				},
				itemTitle:"",
				checked: false,
				isActive: false,
			}
		},
		onLoad(e) {
			this.itemTitle = e.title;
			this.id = e.id;
		},
		onShow() {
			this.apiMyCustomerList();
		},
		methods:{
			toggleActive(event) {
				console.log("index:",event)
				  this.isActive = !this.isActive;
				},
			checkboxChange(){
				
			},
			apiMyCustomerList(){
				this.list = [];
				this.$api.post("/kim/loadMyCustomerList.action",{}).then(res => {
					console.log("customer: ",res);
					this.myCustomerList = res;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 32rpx;
		font-weight: bold;
		color: #FC0099;
	}
	.tag{
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.nav-title{
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		display: flex;
		justify-content: center;
	}
	.u-cell-item {
	  padding: 12px 16px;
	  border-bottom: 1px solid #eee;
	  transition: background-color 0.2s ease;
	}
	
	.u-cell-item.active {
	  background-color: #e8f3ff;
	}
</style>
